<template>
	<view class="room-check-page" v-if="userStatusItem">
		
		
			<view class="p-list">
				<view class="p-l-item">
					<image  class="checkImg" :src="checkImg(userStatusItem)">
					<view class="c_title c-flex">
						<view class="circle_first_char">
							{{getFirstSubstr(userStatusItem.name)}}
						</view>
						<view class="c_title_type">
							<view class="name">{{userStatusItem.name ||'' }}</view>
							<view class="time">用户电话:{{userStatusItem.phone || ''}}</view>
						</view>
						
					</view>
					<view class="p-content">
						<view class="p-c-item c-flex " >
							<text>用气类型：</text> <text>{{userStatusItem.type===0?'民用安检':userStatusItem.type===1?'商业安检':'工业安检'}}</text>
						</view>
						<view class="p-c-item c-flex" >
							<text>用户地址：</text> <text>{{userStatusItem.street}}{{userStatusItem.villageName}}{{userStatusItem.address}}</text>
						</view>
						
										
						
					</view>	
					
					
				</view>
			</view>
			<view class="phone_panel"   v-if='userStatusItem.type!==0'>
				<view class="title">营业执照</view>
				<view class="c-flex jc-between">
					
					<view class="view_phone" style="height: 205rpx;">
						
						<image :src="userStatusItem.licensePic" @tap.stop='previewFile()'></image>
					</view>
				</view>
				
			</view>
			<view class="p-list" v-if="userStatusItem .auditStatus!==0">
				<view class="p-l-item">
					<view class="title-con c-flex jc-between c-item-center">
						审核记录
						
					</view>
					
					<view class="p-content">
						
						<view class="p-c-item c-flex jc-between" >
							<text>审核时间：</text> <text>{{userStatusItem.auditTime || '--'}}</text>
						</view>
						<view class="p-c-item c-flex jc-between" >
							<text>审核人：</text> <text>{{userStatusItem.auditUser || '--'}}</text>
						</view>
						<view class="p-c-item c-flex jc-between" >
							<text>审核意见：</text> <text>{{userStatusItem.auditReason || '--'}}</text>
						</view>
						
						
					</view>
				</view>
			</view>
			<view  v-if="userStatusItem.auditStatus ===0" class="auditStatusIng c-flex c-flex-col jc-center c-item-center">
				<image :src="remoteImgUserUrl+'checkingBg.png'"></image>
				<view>正在审核中，请耐心等待～</view>
			</view>
		
	</view>
</template>

<script>
	
	export default {
		
		data() {
			return {
				
				
				remoteImgUserUrl: this.$API.IMG_URL + '/liquefied-mall/common/',
				userStatusItem:null
			};
		},
		onLoad(params) {
			this.userStatusItem = JSON.parse(params.item)
			console.log(this.userStatusItem)
			uni.setNavigationBarColor({
				backgroundColor:'#f9ead5',
				frontColor: '#000000'
			});
			
		},
		
		methods:{
			previewFile() {
				uni.previewImage({
					current: 0, //预览图片的下标
					urls: [this.userStatusItem.licensePic], //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
					loop: true,
					indicator: 'default'
				});
			},
			checkImg(item){
				if(item.auditStatus===0){
					return this.remoteImgUserUrl +'checking.png'
				}else if(item.auditStatus===1){
					return this.remoteImgUserUrl +'check-pass.png'
				}else if(item.auditStatus===2){
					return this.remoteImgUserUrl +'check-fail.png'
				}
			},
			getFirstSubstr(str) {
				if (str) {
					return str.substr(0, 1)
				}
			},
		}
	}
</script>
<style>
	

	page {
		height: 100%;
		background: #F9F9F9;
	}
</style>
<style lang="scss" scoped>
	.room-check-page{
		position: relative;
		background-image: linear-gradient(rgba(249, 195, 115, .3) 0%, #F9F9F9 100%);
		height: 100%;
		
		.auditStatusIng{
			margin-top: 300rpx;
			image{
				width: 216rpx;
				height: 206rpx;
			}
			view{
				margin-top: 40rpx;
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 500;
				font-size: 30rpx;
				color: #999999;
			}
		}
		
		
		.title-con {
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 32rpx;
			color: #000000;
			padding-top: 15rpx;
		}
		.p-list{
			margin: 0rpx 18rpx 0;
			    position: relative;
			    top: 20rpx;
			.p-l-item{
				background: #FFFFFF;border-radius: 18rpx;padding: 15rpx 28rpx 20rpx;margin-bottom:20rpx;position:relative;
				.p-content {
					margin: 25rpx 0 10rpx;
				
					.p-c-item {
						font-family: PingFang-SC, PingFang-SC;font-weight: 500;font-size: 26rpx;margin-bottom: 24rpx;
						text:first-child{
							
							color: #8B959F;
						}
						text:last-child{
							color: #333333;
							width: 510rpx;
						}

					}	
				}
				.checkImg{
					width: 196rpx;
					height: 150rpx;
					position: absolute;
					top:35rpx;
					right: 10rpx;
				}
				.c_title {
					font-family: PingFangSC-Semibold, PingFang SC;
					padding: 15rpx 0 14rpx 0rpx;
					position: relative;
					.c-pos-r{
						position: absolute;
						right: 10rpx;
						top: 40rpx;
						.checkStatus{
							width:50rpx;height: 50rpx;
							
						}
						
					}
					
					.circle_first_char{
						
						line-height: 92rpx;text-align: center;width: 92rpx;height: 92rpx;background: rgba(232,103,72,0.07);border-radius: 46rpx;border: 2rpx solid #E86748;font-family: PingFangSC, PingFang SC;font-weight: 600;font-size: 40rpx;color: #E86748;
										
						image {
							width: 68rpx;
							height: 68rpx;
						}
					}
				
				
					.c_title_type {
						padding-left: 24rpx;
						padding-top: 10rpx;
				
						.name {
							font-family: PingFang-SC, PingFang-SC;font-weight: 800;font-size: 30rpx;color: #333333;
						}
				
						.time {
							margin-top: 8rpx;font-family: PingFang-SC, PingFang-SC;font-weight: 400;font-size: 26rpx;color: #8B959F;
						}
					}
				}
				
			}
		}
		.phone_panel {
			//margin-top: 32rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			gap: 42rpx;
			padding: 26rpx 20rpx;
			margin: 0rpx 18rpx 0;
			   
				.title{
					font-family: PingFang-SC, PingFang-SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #333333;
					margin-bottom: 26rpx;
				}
			.view_phone {
				width: 310rpx;
				height: 200rpx;
				border-radius: 10rpx;
				position: relative;
		
				//margin:48rpx 34rpx;
				image {
		
					width: 100%;
					height: 100%;
					border-radius: 10rpx;
				}
		
				
			}
		
			
		}
		
	}
	
</style>
